<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
    <script>
        let parent = document.querySelector('.parent');
        let childs = document.querySelectorAll('.child');
        parent.removeChild(childs[1]);
    </script>
    <!-- <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

    <script>
        let child = document.createElement('div');
        child.innerHTML = '100';

        let parent = document.querySelector('.parent');
        // 本来有四个元素,0号元素没有,就插入一个元素
        parent.insertBefore(child,parent.children[0]);
        // 插入到2号元素前,1号元素是1不是child,2号元素是2.
        parent.insertBefore(child,parent.children[2]);
    </script> -->
<!-- <    <div class="test">

    </div>
    <script>
        let div = document.createElement('div');
        div.id = 'mydiv';
        div.className = 'one';
        div.innerHTML = 'hehe';

        let test = document.querySelector('.test');
        test.appendChild(div);
    </script>> -->
    <!-- <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        div {
            height: 100%;
            width: 100%;
        }
        .black{
            background-color:black;
            color: gray;
        }
        .gray {
            background-color: gray;
            color: black;
        }
    </style>
    <div class='black'>
        你好!
    </div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            if(div.className.indexOf("black") != -1){
                div.className = 'gray';
            }else{
                div.className = 'black';
            }
        }
    </script> -->
    <!-- <div style="font-size: 20px;color:red">你好</div>
    <script>
        let div = document.querySelector('div');
        div.onclick = function() {
            let fontSize = parseInt(div.style.fontSize);
            fontSize += 10;
            div.style.fontSize = fontSize + "px";//注意有单位的要带上单位
        }
    </script> -->
    <!-- <h3>选择你喜欢玩的游戏</h3>
    <input type="checkbox" class="game">王者荣耀<br/>
    <input type="checkbox" class="game">和平精英<br/>
    <input type="checkbox" class="game">开心消消乐<br/>
    <input type="checkbox" class="game">我的世界<br/>
    <input type="checkbox" class="all">全选
    <script>
        let games = document.querySelectorAll('.game');
        let all = document.querySelector('.all');
        all.onclick = function(){
            for (let i = 0; i < games.length; i++) {
                games[i].checked = all.checked;
            }
        }
        for (let i = 0; i < games.length; i++) {
            games[i].onclick = function() {
                all.checked = allChecked();
            }
        }

        function allChecked() {
            for (let i = 0; i < games.length; i++) {
                if(!games[i].checked){
                    return false;
                }
            }
            return true;
        }
    </script> -->
    <!-- <input type="text" value="0" id="one">
    <input type="button" value="点击+1" id="add">
    <script>
        let one = document.querySelector('#one');
        let add = document.querySelector('#add');
        add.onclick = function() {
            one.value++;
        }
    </script> -->
    <!-- <input type="button" value="播放">
    <script>
        let input = document.querySelector('input');
        input.onclick = function() {
            if(input.value == '播放'){
                input.value = '暂停';
            }else{
                input.value = '播放';
            }
        }
    </script> -->
    <!-- <img src="male.png" title="男" alt="男">
    <script>
        let img = document.querySelector('img');
        img.onclick = function() {
            if(img.title.lastIndexOf("男") != -1){
                img.src = 'female.png';
                img.title = '女';
            }else{
                img.src = 'male.png';
                img.title = '男';
            }
        }
    </script> -->
    <!-- <div class="one">123</div>
    <div id="two">456</div>
    <script>
        let divs = document.querySelectorAll('div');
        console.log(divs);
    </script> -->
    <!-- <div class="one"> abc </div>
    <div id="two"> def </div>
    <div><input type="text"></div>
    <script>
        let one = document.querySelector('.one');
        console.log(one);
        let two = document.querySelector('#two');
        console.log(two);
        let three = document.querySelector('input');
        console.log(three);
    </script> -->
</body>
</html>